<template>
  <div>
    <div class="add_list">
      <el-radio v-for="(item, index) in titleList" :key="index" v-model="title" :label="item.title">{{ item.title }}</el-radio>
      <el-input v-model="title" placeholder="类型" />
      <el-input v-model="itemList" placeholder="商品名称(如:内衣,裙子) 用空格分隔" />
      <el-button type="success" @click="add">添加</el-button>
      <span v-if="msg">{{ msg }}</span>
    </div>
    <div class="delete_item">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="商品类别" prop="title">
          <el-input v-model="ruleForm.title" type="text" placeholder="输入要删除的商品类别(如内衣，男装，女装)" />
        </el-form-item>
        <el-form-item label="商品名称" prop="itemname">
          <el-input v-model="ruleForm.itemname" type="text" placeholder="输入要删除的商品名称(如衬衫，卫衣，风衣)" />
        </el-form-item>
        <el-form-item label="管理员密码" prop="itemname">
          <el-input v-model="adminPas" type="text" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="mdelete">删除</el-button>
          <span v-if="deletemsg">{{ deletemsg }}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'register',
  data () {
    return {
      title: '',
      itemList: '',
      titleList: [],
      msg: '',
      deletemsg: '',
      adminPas: '',
      ruleForm: {
        title: '',
        itemname: ''
      },
      rules: {
        title: [
          { required: true, message: '不可为空', trigger: "blur" }
        ],
        itemname: [
          { required: false, message: '不可为空', trigger: "blur" }
        ]
      }
    }
  },
  async mounted () {
    const self = this
    const { status, data } = await this.$axios.get('/goods/getTypes')
    if (status === 200) {
      self.titleList = data.itemList
    }
  },
  methods: {
    add () {
      this.$prompt('当前包含写库操作，请输入管理员密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        if (value === '246799') {
          if (((!this.itemList.includes(' ')) && this.itemList.length > 4) || this.title === '' || this.itemList === '') {
            this.$alert('请正确输入,商品类别必填,多个商品用空格分隔')
            return
          }
          const { status, data } = await this.$axios.post('/goods/add', {
            title: this.title,
            itemList: this.itemList
          })
          if (status === 200) {
            this.msg = data.msg
            setTimeout(() => {
              location.reload()
            }, 2000)
          }
        }
      }).catch(() => {
      })
    },
    mdelete () {
      const self = this
      if (self.adminPas === "246799") {
        self.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            const { status, data } = await self.$axios.get('/goods/delete', {
              params: {
                title: this.ruleForm.title,
                item: this.ruleForm.itemname
              }
            })
            if (status === 200) {
              this.deletemsg = data.msg
              setTimeout(() => {
                location.reload()
              }, 2000)
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.add_list >>> .el-input
  margin 20px 0
.delete_item
  margin 20px 0
  padding 0px 20px
.add_list
  padding 20px
  line-height 30px
</style>
